<template>
  <div class="mycontainer">
    <div id="l-map">
      <Map
        :deviceCategoryList="deviceCategoryList"
        v-if="deviceCategoryList.line.length"
        :inspUserPosition="currentInspUserPositionData"
      />
    </div>
    <div class="left" :class="{ w20vw: operat, w0vw: !operat }" v-if="operat">
      <div class="block h-[22vh]">
        <div class="title">
          管网资产
          <b
            class="float-right ml-[1vh] mt-[0.1vh] text-[1.2vh]"
            @click="f_ShowMore"
            >查看更多</b
          >
          <b class="float-right" @click="f_ShowReportSelect(1)"
            ><i-ep-document style="color: #82bfff"
          /></b>
        </div>
        <!-- <component
          :is="chartComponent('gwzc')"
          id="gwzc"
          height="16vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        /> -->
        <gwzc
          id="gwzc"
          height="16vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        ></gwzc>
      </div>
      <div class="block h-[30vh]">
        <div class="title">
          管网在线监测
          <b style="float: right" @click="f_ShowReportSelect(2)"
            ><i-ep-document style="color: #82bfff"
          /></b>
        </div>
        <!-- <component
          :is="chartComponent('gwzxjc')"
          id="gwzxjc"
          height="30.5vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        /> -->
        <gwzxjc
          id="gwzxjc"
          height="30.5vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        ></gwzxjc>
      </div>
      <div class="block">
        <div class="title">
          设备在线监测
          <b style="float: right" @click="f_ShowReportSelect(3)"
            ><i-ep-document style="color: #82bfff"
          /></b>
        </div>

        <!-- <component
          :is="chartComponent('sbzxjc')"
          id="sbzxjc"
          height="31vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        /> -->
        <sbzxjc
          id="sbzxjc"
          height="31vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        ></sbzxjc>
      </div>
      <div v-if="showMore" class="moreblock">
        <span @click="f_ShowMore" class="close">X</span>
        <!-- <component
          :is="chartComponent('more')"
          id="more"
          :tablePointTypeData="tablePointTypeData"
        /> -->
        <more id="more" :tablePointTypeData="tablePointTypeData"></more>
      </div>
    </div>
    <div class="center" :class="{ w60vw: operat, w100vw: !operat }">
      <span class="operat" @click="f_Operat">
        <i-ep-ArrowLeft
          v-if="operat"
          class="mr-[0.5vh] mt-[1.2vh] text-size-[1.3vh]"
        />
        <i-ep-ArrowRight
          v-if="!operat"
          class="mr-[0.5vh] mt-[1.2vh] text-size-[1.3vh]"
        />
      </span>
      <span class="operat right1" @click="f_Operat">
        <i-ep-ArrowRight
          v-if="operat"
          class="mr-[0.5vh] mt-[1.2vh] text-size-[1.3vh]"
        />
        <i-ep-ArrowLeft
          v-if="!operat"
          class="mr-[0.5vh] mt-[1.2vh] text-size-[1.3vh]"
        />
      </span>
      <div class="content" :class="{ h10vh: deviceTag, h0vh: !deviceTag }">
        <b class="deviceTag" @click="deviceTag = !deviceTag">
          设 备 图 例
          <i-ep-ArrowDown v-if="deviceTag" class="text-size-[1vh] v-middle" />
          <i-ep-ArrowUp v-if="!deviceTag" class="text-size-[1vh] v-sub" />
        </b>
        <div class="tag">
          <p
            @click="f_Trun(1)"
            :class="{ active: showDevice == 1 }"
            class="cursor-pointer"
          >
            点
          </p>
          <p
            @click="f_Trun(2)"
            :class="{ active: showDevice == 2 }"
            class="cursor-pointer"
          >
            线
          </p>
        </div>
        <div class="device" v-if="showDevice == 1">
          <div
            class="scrollbox"
            :style="{ width: tablePointData.length * 120 + 'px' }"
          >
            <b
              :span="3"
              class="text-center fade item"
              v-for="item in tablePointData"
              :key="item.classId"
            >
              <p>{{ item.pointName ? item.pointName : "--" }}</p>
              <img v-if="f_GetPointImg(item.classId) == 1" :src="markerIcon1" />
              <img v-if="f_GetPointImg(item.classId) == 2" :src="markerIcon2" />
              <img v-if="f_GetPointImg(item.classId) == 3" :src="markerIcon3" />
              <img v-if="f_GetPointImg(item.classId) == 4" :src="markerIcon4" />
              <img v-if="f_GetPointImg(item.classId) == 5" :src="markerIcon5" />
              <img v-if="f_GetPointImg(item.classId) == 6" :src="markerIcon6" />
              <img v-if="f_GetPointImg(item.classId) == 7" :src="markerIcon7" />
              <img v-if="f_GetPointImg(item.classId) == 8" :src="markerIcon8" />
              <img v-if="f_GetPointImg(item.classId) == 9" :src="markerIcon9" />
              <img
                v-if="f_GetPointImg(item.classId) == 10"
                :src="markerIcon10"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 11"
                :src="markerIcon11"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 12"
                :src="markerIcon12"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 13"
                :src="markerIcon13"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 14"
                :src="markerIcon14"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 15"
                :src="markerIcon15"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 16"
                :src="markerIcon16"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 17"
                :src="markerIcon17"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 18"
                :src="markerIcon18"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 19"
                :src="markerIcon19"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 20"
                :src="markerIcon20"
              />
            </b>
          </div>
        </div>
        <el-row class="device" v-if="showDevice == 2">
          <el-col
            :span="3"
            :offset="1"
            class="text-center fade"
            v-for="item in polylineListRef"
            :key="item.classId"
          >
            <p>{{ item.lineName ? item.lineName : "--" }}</p>
            <span :style="{ background: f_GetLineColor(item.classId) }"></span>
          </el-col>
        </el-row>
      </div>
      <div class="tag">
        <p>3D</p>
        <p class="active">标准地图</p>
      </div>
    </div>
    <div class="right" :class="{ w20vw: operat, w0vw: !operat }" v-if="operat">
      <div class="block h-[24vh]">
        <div class="title">
          今日巡检情况
          <b
            class="float-right ml-[1vh] mt-[0.1vh] text-[1.2vh]"
            @click="f_ShowPerson"
            >今日巡检人员</b
          >
          <b style="float: right" @click="f_ShowReportSelect(4)"
            ><i-ep-document style="color: #82bfff"
          /></b>
        </div>
        <!-- <component
          :is="chartComponent('jrxjqk')"
          id="jrxjqk"
          height="22vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        /> -->
        <jrxjqk
          id="jrxjqk"
          height="22vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        ></jrxjqk>
      </div>
      <div class="block">
        <div class="title mb-[0.2vh]">
          巡检计划分析
          <b style="float: right" @click="f_ShowReportSelect(5)"
            ><i-ep-document style="color: #82bfff"
          /></b>
          <span class="float-right mr-[1vh] w-[8vw] mt-[-0.6vh!important]">
            <!-- <el-select
              v-model="year"
              placeholder="选择年份"
              style="width: 5vw; margin-bottom: 0.5vh"
              size="small"
            >
              <el-option label="2024" value="2024" />
            </el-select> -->

            <el-date-picker
              style="width: 90px"
              v-model="year"
              type="year"
              placeholder="选择年份"
            />
          </span>
        </div>
        <!-- <component
          :is="chartComponent('xjjhfx')"
          :year="year"
          id="xjjhfx"
          height="25.5vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        /> -->
        <xjjhfx
          :year="year"
          id="xjjhfx"
          height="25.5vh"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        ></xjjhfx>
      </div>
      <div class="block">
        <div class="title">
          巡检隐患上报(本月)
          <b style="float: right" @click="f_ShowReportSelect(6)"
            ><i-ep-document style="color: #82bfff"
          /></b>
        </div>
        <!-- <component
          :is="chartComponent('xjyhsb')"
          id="xjyhsb"
          class="bg-[var(--el-bg-color-overlay)]"
        /> -->
        <xjyhsb id="xjyhsb" class="bg-[var(--el-bg-color-overlay)]"></xjyhsb>
      </div>

      <div v-if="showPerson" class="moreblock moreright">
        <span @click="f_ShowPerson" class="close">X</span>
        <!-- <component
          :is="chartComponent('person')"
          id="more"
          @getposition="f_GetPersonPosition"
        /> -->
        <person id="more" @getposition="f_GetPersonPosition"></person>
      </div>
    </div>

    <!-- 快速报表 -->
    <div v-if="dialog.visible1">
      <el-dialog
        v-model="dialog.visible1"
        title="数据报表"
        width="560px"
        append-to-body
        @close="f_CloseDialog"
        style="background: #fff"
        :close-on-click-modal="false"
      >
        <div>
          <div v-if="reportType != 1" class="h-[30px] ml-[25px] mt-[20px]">
            <el-date-picker
              v-model="reportValue"
              type="month"
              placeholder="选择查询的年月"
              style="width: 240px"
              size="default"
            />
          </div>
          <div
            v-if="reportType == 1"
            class="display-[block] text-center mt-[20px]"
          >
            <el-row
              :gutter="20"
              class="pb-[15px]"
              style="max-height: 500px; overflow: auto"
            >
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px] mb-[12px] cursor-pointer"
                  type="warning"
                  @click="f_ToReport(1)"
                >
                  管点资产汇总表 <i-ep-search class="ml-[16px]"
                /></el-tag>

                <el-tag
                  size="large"
                  class="w-[220px] mb-[12px] cursor-pointer"
                  type="primary"
                  @click="f_ToReport(2, item.classId, item.className)"
                  v-for="item in pointData"
                >
                  {{
                    item.className.length > 10
                      ? item.className.substring(0, 10) + "..."
                      : item.className
                  }}
                  <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>

              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px] mb-[12px] cursor-pointer"
                  type="warning"
                  @click="f_ToReport(3)"
                >
                  管段资产清单 <i-ep-search class="ml-[16px]"
                /></el-tag>
                <el-tag
                  size="large"
                  class="w-[220px] mb-[12px] cursor-pointer"
                  type="primary"
                  @click="f_ToReport(3, item.classId, item.className)"
                  v-for="item in lineData"
                >
                  {{
                    item.className.length > 10
                      ? item.className.substring(0, 10) + "..."
                      : item.className
                  }}
                  <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>
            </el-row>
          </div>

          <div
            v-if="reportType == 2"
            class="display-[block] text-center mt-[20px]"
          >
            <el-row :gutter="20" class="pb-[15px]">
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(5)"
                >
                  管网在线监测 <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(6)"
                >
                  管网异常数据监测 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
            </el-row>
          </div>

          <div
            v-if="reportType == 3"
            class="display-[block] text-center mt-[20px]"
          >
            <el-row :gutter="20" class="pb-[15px]">
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(7)"
                >
                  设备在线监测 <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(8)"
                >
                  设备异常上报 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
            </el-row>
          </div>

          <div
            v-if="reportType == 4"
            class="display-[block] text-center mt-[20px]"
          >
            <el-row :gutter="20" class="pb-[15px]">
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(9)"
                >
                  今日巡检计划清单 <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(10)"
                >
                  月度巡检计划清单 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(11)"
                >
                  年度巡检计划清单 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
            </el-row>
          </div>

          <div
            v-if="reportType == 5"
            class="display-[block] text-center mt-[20px]"
          >
            <el-row :gutter="20" class="pb-[15px]">
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(12)"
                >
                  月度巡检计划分析 <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>

              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(13)"
                >
                  年度巡检计划分析 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(14)"
                >
                  巡检人员月度情况分析 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(15)"
                >
                  巡检人员年度情况分析 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
            </el-row>
          </div>

          <div
            v-if="reportType == 6"
            class="display-[block] text-center mt-[20px]"
          >
            <el-row :gutter="20" class="pb-[15px]">
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(16)"
                >
                  月度隐患上报清单 <i-ep-search class="ml-[16px]"
                /></el-tag>
              </el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(18)"
                >
                  月度隐患上报分析 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(17)"
                >
                  年度隐患上报清单 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
              <el-col :span="12" class="mb-[15px]">
                <el-tag
                  size="large"
                  class="w-[220px]"
                  type="primary"
                  @click="f_ToReport(19)"
                >
                  年度隐患上报分析 <i-ep-search class="ml-[16px]" /></el-tag
              ></el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Base",
  inheritAttrs: false,
});
import Map from "./components/Map/index.vue";
import { useDeviceCategory } from "@/views/layer/gismap/hooks/useDeviceCategory";
import gwzc from "./components/gwzc.vue";
import gwzxjc from "./components/gwzxjc.vue";
import jrxjqk from "./components/jrxjqk.vue";
import more from "./components/more.vue";
import person from "./components/person.vue";
import sbzxjc from "./components/sbzxjc.vue";
import xjjhfx from "./components/xjjhfx.vue";
import xjyhsb from "./components/xjyhsb.vue";

const deviceCategoryList: any = ref({ line: [] });

onBeforeMount(async () => {
  deviceCategoryList.value = await useDeviceCategory();
});

import GISPolylineList from "./PolylineList/index.vue";

import "leaflet/dist/leaflet.css";
import "leaflet";

import { find } from "lodash";
import { Search } from "@element-plus/icons-vue";
import DangerAPI from "@/api/DangerAPI";
import moment from "moment";
import LineAPI from "@/api/LineAPI";
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";

import { queryAreaInfoList, queryPolylines } from "@/api/pipe";

import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import { LMarker, LIcon } from "@vue-leaflet/vue-leaflet";
import { LPolygon, LPolyline } from "@vue-leaflet/vue-leaflet";

import DashboardAPI from "@/api/DashboardAPI";

const pointData = ref([]);
const lineData = ref([]);

// 隐患图片
const markerIcon1 = ref(
  new URL(`../../assets/device/1.png`, import.meta.url).href
);
const markerIcon2 = ref(
  new URL(`../../assets/device/2.png`, import.meta.url).href
);
const markerIcon3 = ref(
  new URL(`../../assets/device/3.png`, import.meta.url).href
);
const markerIcon4 = ref(
  new URL(`../../assets/device/4.png`, import.meta.url).href
);
const markerIcon5 = ref(
  new URL(`../../assets/device/5.png`, import.meta.url).href
);
const markerIcon6 = ref(
  new URL(`../../assets/device/6.png`, import.meta.url).href
);
const markerIcon7 = ref(
  new URL(`../../assets/device/7.png`, import.meta.url).href
);
const markerIcon8 = ref(
  new URL(`../../assets/device/8.png`, import.meta.url).href
);
const markerIcon9 = ref(
  new URL(`../../assets/device/9.png`, import.meta.url).href
);
const markerIcon10 = ref(
  new URL(`../../assets/device/10.png`, import.meta.url).href
);
const markerIcon11 = ref(
  new URL(`../../assets/device/11.png`, import.meta.url).href
);
const markerIcon12 = ref(
  new URL(`../../assets/device/12.png`, import.meta.url).href
);
const markerIcon13 = ref(
  new URL(`../../assets/device/13.png`, import.meta.url).href
);
const markerIcon14 = ref(
  new URL(`../../assets/device/14.png`, import.meta.url).href
);
const markerIcon15 = ref(
  new URL(`../../assets/device/15.png`, import.meta.url).href
);
const markerIcon16 = ref(
  new URL(`../../assets/device/16.png`, import.meta.url).href
);
const markerIcon17 = ref(
  new URL(`../../assets/device/17.png`, import.meta.url).href
);
const markerIcon18 = ref(
  new URL(`../../assets/device/18.png`, import.meta.url).href
);
const markerIcon19 = ref(
  new URL(`../../assets/device/19.png`, import.meta.url).href
);
const markerIcon20 = ref(
  new URL(`../../assets/device/20.png`, import.meta.url).href
);

const currentInspUserPositionData = ref([]);

// 获取数据变化
function f_GetPersonPosition(data) {
  currentInspUserPositionData.value = data;
}

// 返回图片
function f_GetPath(data: any) {
  let index = 1;
  if (data.classId) {
    let typeData = find(tablePointTypeData.value, { classId: data.classId });
    index = typeData.image;
  }
  return Number(index);
}

const year = ref(new Date());
const showMore = ref(false);
const showPerson = ref(false);
const tablePointData = ref([]);
const areaPolygonList = ref([]);
const polylineListRef = ref([]);

const tablePointTypeData = ref([]);

const reportType = ref(1);
const reportValue = ref(new Date());
const showDevice = ref(1);
const deviceTag = ref(true);
const operat = ref(true);
const fzOrGx = ref("fz");
const dialog = reactive({
  visible1: false,
});

const zoom = ref(12);

const getAllAreas = () =>
  queryAreaInfoList({
    pageSize: 100000,
    pageIndex: 1,
  }).then(({ data, succeeded }: any) => {
    if (succeeded && Array.isArray(data?.items)) {
      areaPolygonList.value = data.items
        .filter((item: any) => item.jsonGeom)
        .map((item: any) => {
          const { coordinates } = JSON.parse(item.jsonGeom);
          coordinates[0] = coordinates[0].map((item: any) => [
            item[1],
            item[0],
          ]);
          return {
            ...item,
            coordinates,
          };
        });

      console.log(areaPolygonList.value);
    }
  });

const getAllLines = () =>
  queryPolylines({ pageSize: 100000, pageIndex: 1, isPublic: true }).then(
    ({ data, errors, succeeded }: any) => {
      if (succeeded && Array.isArray(data?.items)) {
        polylineListRef.value = data.items
          .filter((item: any) => item.jsonGeom)
          .map((item: any) => {
            const { coordinates } = JSON.parse(item.jsonGeom);
            const [lng, lat] = coordinates[0];
            return {
              ...item,
              coordinates: coordinates.map((item: any) => [item[1], item[0]]),
              startPoint: [lat, lng],
            };
          });

        console.log(polylineListRef.value);
      }
    }
  );

// 查询：管点分组统计信息
function f_QueryGisPointGroupInfo() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    pClassId: "01",
  };
  DashboardAPI.api_query_gis_point_group_info(params).then(({ data }) => {
    if (data && data.length) {
      pointData.value = data;
    }
  });
}

// 查询：管段分组统计信息
function f_QuryGisLineGroupInfo() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    pClassId: "02",
  };
  DashboardAPI.api_query_gis_line_group_info(params).then(({ data }) => {
    if (data && data.length) {
      lineData.value = data;
    }
  });
}

// 返回管线颜色
function f_GetLineColor(classId: String) {
  let color = "red";
  if (classId) {
    let data = find(tablePointTypeData.value, { classId: classId });

    color = data ? data.image : "red";
  }
  return color;
}

// 返回管点图标
function f_GetPointImg(classId: String) {
  let color = 1;
  if (classId) {
    let data = find(tablePointTypeData.value, { classId: classId });

    color = data ? data.image : 1;
  }
  return color;
}

// 显示更多
function f_ShowMore() {
  showMore.value = !showMore.value;
}

// 今日巡检人员
function f_ShowPerson() {
  showPerson.value = !showPerson.value;
}

// 查询 管点
function f_HandleQueryPointLine() {
  let params = {
    pageSize: 100000,
    pageIndex: 1,
    isCoordinate: true,
  };
  GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tablePointData.value = data.items
        .filter((item: any) => item.jsonGeom)
        .map((item: any) => {
          const [lng, lat] = JSON.parse(item.jsonGeom).coordinates;
          return {
            ...item,
            latlng: [lat, lng],
          };
        });
      console.log(tablePointData.value);
    }
  });
}

// 查询 管点
function f_HandleQueryPointLineType() {
  let params = {
    pageSize: 100000,
    pageIndex: 1,
  };
  DeviceCategoryApi.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tablePointTypeData.value = data.items;
      f_HandleQueryPointLine();
      getAllLines();
    }
  });
}

// 关闭弹窗
function f_CloseDialog(type) {
  dialog.visible = false;
}

// 快速报表
function f_ShowReportSelect(type: number) {
  reportType.value = type;
  dialog.visible1 = true;
  setTimeout(() => {
    reportValue.value = new Date();
  }, 2000);
}

// 跳转到 客户满意度报表
function f_ToReport(type, id, name) {
  dialog.visible = false;
  if (type == 1 || type == 3) {
    window.open(
      "http://" + window.location.host + "/#/report?type=" + type,
      "_blank"
    );
  } else if (type == 2 || type == 4) {
    window.open(
      "http://" +
        window.location.host +
        "/#/report?type=" +
        type +
        "&id=" +
        id +
        "&name=" +
        name,
      "_blank"
    );
  } else {
    window.open(
      "http://" +
        window.location.host +
        "/#/report?type=" +
        type +
        "&time=" +
        reportValue.value,
      "_blank"
    );
  }
}

// 更新 发展
function f_ChangeLine() {
  if (fzOrGx.value == "gx") {
    fzOrGx.value = "fz";
  } else {
    fzOrGx.value = "gx";
  }
}

// 巡检计划清单
function f_QueryInsp5() {
  let params = {
    StartTime: "2024-01-01 00:00:00",
    EndTime: "2024-12-31 23:59:59",
    Status: 1,
    Type: 1, // Desc:巡检计划清单 1-今日 2-月度 3-年度 Default: Nullable:True
  };
  DashboardAPI.api_insp_task(params).then((data) => {
    console.log(data);
  });
}

// 图表数据
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};

// 点击展开收缩
function f_Operat() {
  operat.value = !operat.value;
}

// 切换
function f_Trun(value) {
  showDevice.value = value;
}
watchEffect(() => {});
// ----------------------------------GIS 相关-------------------------------

onMounted(() => {
  f_QueryInsp5();
  f_HandleQueryPointLineType();
  // f_HandleQueryPointLine();
  getAllAreas();
  // getAllLines();
  f_QueryGisPointGroupInfo();
  f_QuryGisLineGroupInfo();
});
</script>

<style lang="scss" scoped>
.mycontainer {
  position: relative;
  width: 100vw !important;
  height: 88.5vh;
  overflow: hidden;

  #l-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
  }

  .w0vw {
    width: 0;
  }

  .w20vw {
    width: 20vw;
  }

  .w60vw {
    width: 58.6vw;
  }

  .w100vw {
    width: 98.6vw;
  }

  .moreblock {
    position: absolute;
    top: 0;
    right: -22vw;
    width: 22vw;
    height: 60vh;
    padding: 0.5vw;
    overflow: auto;
    background: #386b94b8;

    .close {
      position: absolute;
      top: 1vh;
      right: 1.5vh;
      color: #fff;
      cursor: pointer;
    }
  }

  .moreright {
    left: -16vw;
    width: 16vw;
  }

  .left {
    position: relative;
    z-index: 10000;
    float: left;
    height: 88.5vh;
    padding: 1vh;
    background: rgb(18 60 101 / 90%);
    // .block {
    //   height: 28vh;
    // }
  }

  .right {
    position: relative;
    z-index: 10000;
    float: right;
    height: 88.5vh;
    padding: 1vh;
    background: rgb(18 60 101 / 90%);
  }

  .center {
    position: relative;
    float: left;
    // height: 88.5vh;
    height: 9vh;
    margin-top: 79.5vh;

    span.operat {
      position: relative;
      top: -36vh;
      z-index: 1000;
      display: inline-block;
      width: 1vw;
      height: 4vh;
      background: rgb(102 172 253 / 80.8%);
    }

    span.right1 {
      float: right;
      width: 1vw;
      overflow: hidden;
    }

    > div.content {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10000;
      width: 100%;
      background: rgb(18 60 101 / 90%);

      .tag {
        top: 0.5vh;
        left: 0;
      }

      .deviceTag {
        position: absolute;
        top: -1.6vh;
        left: 50%;
        width: 5vw;
        height: 1.6vh;
        margin-left: -2.5vw;
        font-size: 0.8vh;
        font-weight: normal;
        line-height: 1.8vh;
        color: #15256b;
        text-align: center;
        cursor: pointer;
        background: rgb(102 172 253 / 80.8%);
      }

      .device::-webkit-scrollbar {
        display: block !important;
        // background: rgba(169, 169, 169, 0.336);
      }

      /* 美化全局的滚动条 */
      .device::-webkit-scrollbar {
        width: 4px;
        height: 6px;
        // background: red;
      }
      .device::-webkit-scrollbar-corner {
        display: block;
        background: transparent;
      }
      .device::-webkit-scrollbar-thumb {
        border-radius: 8px;
        // background-color: rgba(0, 0, 0, 0.2);
        background-clip: content-box;
        border: 10px solid #4a5ae749;
      }
      .device::-webkit-scrollbar-thumb,
      .device::-webkit-scrollbar-track {
        // border-right-color: transparent;
        // border-left-color: transparent;
        // background-color: rgba(18, 60, 101, 0.9);
      }

      .device::-webkit-scrollbar-track {
        // background-color: rgba(228, 12, 12, 0.801);
        border: 3px solid rgba(255, 255, 0, 0.027);
      }

      .device {
        height: 9vh;
        padding-top: 1.6vh;
        font-size: 1vh;
        color: rgb(255 255 255 / 60%);
        overflow-x: scroll;
        white-space: nowrap;
        overflow-y: hidden;
        > div {
          display: inline-block;
          b {
            display: inline-block;
            vertical-align: top;
            width: 120px; /* 每个子元素的宽度 */
            height: 80px; /* 每个子元素的高度 */
            cursor: grabbing;
            cursor: -moz-grabbing;
            cursor: -webkit-grabbing;
          }
        }

        .el-col {
          padding-right: 1vw;
          padding-left: 1vw;

          p {
            margin-bottom: 0.6vh;
            text-align: center;
          }
        }

        span {
          display: inline-block;
          width: 80%;
          height: 1vh;
          margin: 1vh 0;
        }

        img {
          height: 2.6vh;
          margin-top: 0;
          margin-bottom: 2vh;
        }

        @keyframes fade {
          0% {
            opacity: 1;
          }

          50% {
            opacity: 0.4;
          }

          100% {
            opacity: 1;
          }
        }

        @keyframes fade {
          0% {
            opacity: 1;
          }

          50% {
            opacity: 0.4;
          }

          100% {
            opacity: 1;
          }
        }

        .fade {
          animation: fade 1200ms infinite;
        }
      }
    }

    .h10vh {
      height: 9vh;
    }

    .h0vh {
      height: 0;
    }

    .tag {
      position: absolute;
      top: 0.5vh;
      right: 0.5vw;
      z-index: 1000;
      display: inline-block;
      width: 2.4vw;
      height: 1.4vh;
      padding: 0;
      overflow: hidden;
      line-height: 1.2vh;
      border: 1px solid #12b6cce0;
      border-radius: 0.1vw;

      p {
        float: left;
        width: 50%;
        height: 1.4vh;
        margin: 0;
        font-size: 0.4vw;
        line-height: 1.4vh;
        text-align: center;
      }

      p.active {
        background-color: #12b6cc69;
      }
    }
  }

  .block {
    min-height: 20vh;
    padding: 0 0.3vh;
    margin-bottom: 1vh;
    // border: 0.25vh solid #12b6cc;
    border-radius: 0.4vw;

    .title {
      padding: 0.5vh;
      padding-left: 2.4vw;
      font-family: fangsong, sans-serif;
      font-size: 1.4vh;
      font-weight: bolder;
      color: #82bfff;
      background-image: url("@/assets/img/bg_type2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      b {
        cursor: pointer;
      }

      span {
        float: right;
        width: 6vw;
        margin-top: 0.2vh;
        font-size: 12px;
        text-align: right;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
}

:deep .anchorBL {
  display: none !important;
}

::-webkit-scrollbar {
  display: none;
}

:deep .el-select--small .el-select__wrapper {
  background: #f5f5f52f;
  box-shadow: 0 0 0 1px #82beff00 inset;
}

:deep .el-select__selected-item {
  color: #82bfff;
}
:deep .el-input__wrapper {
  background: rgb(232 232 232 / 22%);
  box-shadow: none;
}
:deep .el-input__inner {
  color: #1e2109;
}
</style>
